<template>
  <div class="standard-item-list">
    <div class="query-container">
      <router-link :to="{name: `StandardItemCreate`, query: {id: this.$route.query.id}}">
        <el-button type="primary" icon="el-icon-plus" size="mini" > New Standard Item </el-button>
      </router-link>
    </div>

    <el-table v-loading="loading.list" class="margin-top-10" :data="itemList" border fit max-height="10000" highlight-current-row style="width: 100%;" >
      <el-table-column label="Title" min-width="120">
        <template slot-scope="scope">
          <router-link :to="{name: `StandardPanel`, query: {id: scope.row.Id}}">
            <span class="link-type">{{ scope.row.Title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="Action" align="center" width="120" class-name="action-cell" >
        <template slot-scope="scope">
          <router-link :to="{ name:`StandardItemPanel`, query: {id: scope.row.Id} }">
            <el-button type="primary" size="mini" icon="el-icon-edit" style="width: 40px" />
          </router-link>
          <el-button size="mini" type="danger" icon="el-icon-delete" :loading="scope.row.Status === 'deleting'" style="width: 40px; margin-left: 10px" @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fetchStandardItemList,deleteStandardItem } from '@/api/standard'

export default {
  name: 'PlanList',
  data() {
    return {
      listQuery: {
        Id: ''
      },
      itemList: [],
      loading: {
        list: true
      }
    }
  },
  created() {
    this.listQuery.id = this.$route.query.id
    this.fetchStandardItemList()
  },
  methods: {
    async fetchStandardItemList() {
      try {
        this.$set(this.loading, 'list', true)
        const data = await fetchStandardItemList(this.listQuery)
        if (data.Message === 'ok') {
          this.itemList = data.Data
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.$set(this.loading, 'list', false)
      }
    },
   async handleDelete(row) { 
      const data = await deleteStandardItem(row.Id)
      if (data.Message === 'ok') {
          this.$message("删除成功")
          this.fetchStandardItemList()
      }
    }
  }
}
</script>

<style scoped>

</style>
